@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html,
  body,
  #root {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components {
  .ribbon-tab {
    @apply px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 cursor-pointer transition-colors;
  }

  .ribbon-tab.active {
    @apply text-primary-600 bg-white border-b-2 border-primary-600;
  }

  .ribbon-button {
    @apply flex flex-col items-center justify-center p-2 hover:bg-gray-100 rounded cursor-pointer transition-colors;
  }

  .ribbon-button:active {
    @apply bg-gray-200;
  }

  .panel-header {
    @apply px-4 py-2 bg-gray-50 border-b border-gray-200 font-medium text-sm text-gray-700;
  }

  .map-container {
    @apply w-full h-full relative;
  }

  .attribute-table {
    @apply w-full border-collapse;
  }

  .attribute-table th {
    @apply bg-gray-50 px-4 py-2 text-left text-xs font-medium text-gray-700 uppercase tracking-wider border-b border-gray-200;
  }

  .attribute-table td {
    @apply px-4 py-2 text-sm text-gray-900 border-b border-gray-100;
  }
}

/* OpenLayers样式已通过ol/ol.css引入 */

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}
